<template>
  <div class="contract">
    <hunk-head name="电子合同"></hunk-head>
    <div class="hunk">
      <div class="search">
        <img v-if="baseUrl" :src="baseUrl+'search.png'" >
        <input type="text" v-model="searchVal" placeholder="搜索合同编号" @input="searchInput">
      </div>
    <scroll-view style="height:calc(76.5555vh)" class="" scroll-x="false" scroll-y="false"  lower-threshold="50" scroll-top="0" scroll-left="0" @scrolltolower="bindSrollToBottom" >
        <div class="flex" style=" justify-content: space-between;padding:0 20rpx;width:100%;border-radius:30rpx">
          <div class="box" v-for="(item,index) in contractList" :key="index" @click="bindOpenPdf(item)">
            <radio :checked="item.checked"  class="checkbox" color="#FFAA58" @click.stop="checkItem(index,item)"/>
            <div style="background:#fff;padding:35rpx;text-align:center">
              <img :src="baseUrl+'pdf.png'" alt="" class="pdfStyle">
            </div>
            <p class="pstyle">{{item.code}}</p>
          </div>
        </div>
    </scroll-view>
    <div class="send-box" v-if="state==0">
      <div @click="send" class="send-btn" v-if="shareArr.length<=0">发送</div>
      <button v-else open-type="share" class="send-btn">发送</button>
    </div>
      <div class="send-box" v-else-if="state==1">
      <div @click="bindSelect" class="send-btn" >选择</div>
    </div>
      
  
    </div>
  </div>
</template>
<script>
import Head from '@componentsMine/head'
import{tEContractList,getMyEContractlist,tEContractInfo} from '@/apis/contract'
import {debounce} from 'lodash'
export default {
  components: {
    'hunk-head': Head
  },
  name: 'contract',
  data() {
    return {
      contractList:[
        // {"eid":55,"code":"302204","submitter":null,"submittime":null,"optuserid":1,"createtime":"2022-04-16T10:30:46.000+0000","fileurl":"http://111.231.92.29:9008/api/file//contract/2022/04/15/004141b2-6987-4e79-90e7-78c8c03f2c82.pdf","state":0,"deptid":262,"readflag":null,"autographurl":null,"sealurl":null,"sealid":null},{"eid":59,"code":"402204","submitter":null,"submittime":null,"optuserid":1,"createtime":"2022-04-16T10:30:46.000+0000","fileurl":"http://111.231.92.29:9008/api/file//contract/2022/04/15/004141b2-6987-4e79-90e7-78c8c03f2c82.pdf","state":0,"deptid":262,"readflag":null,"autographurl":null,"sealurl":null,"sealid":null},{"eid":47,"code":"10220","submitter":null,"submittime":null,"optuserid":1,"createtime":"2022-04-16T10:30:46.000+0000","fileurl":"http://111.231.92.29:9008/api/file//contract/2022/04/15/004141b2-6987-4e79-90e7-78c8c03f2c82.pdf","state":0,"deptid":262,"readflag":null,"autographurl":null,"sealurl":null,"sealid":null},{"eid":51,"code":"102204","submitter":null,"submittime":null,"optuserid":1,"createtime":"2022-04-16T10:30:46.000+0000","fileurl":"http://111.231.92.29:9008/api/file//contract/2022/04/15/004141b2-6987-4e79-90e7-78c8c03f2c82.pdf","state":0,"deptid":262,"readflag":null,"autographurl":null,"sealurl":null,"sealid":null},{"eid":46,"code":"102","submitter":null,"submittime":null,"optuserid":1,"createtime":"2022-04-15T19:42:03.000+0000","fileurl":"http://111.231.92.29:9008/api/file//contract/2022/04/15/004141b2-6987-4e79-90e7-78c8c03f2c82.pdf","state":0,"deptid":262,"readflag":null,"autographurl":null,"sealurl":null,"sealid":null},{"eid":54,"code":"3023","submitter":null,"submittime":null,"optuserid":1,"createtime":"2022-04-15T19:42:03.000+0000","fileurl":"http://111.231.92.29:9008/api/file//contract/2022/04/15/004141b2-6987-4e79-90e7-78c8c03f2c82.pdf","state":0,"deptid":262,"readflag":null,"autographurl":null,"sealurl":null,"sealid":null},{"eid":50,"code":"1023","submitter":null,"submittime":null,"optuserid":1,"createtime":"2022-04-15T19:42:03.000+0000","fileurl":"http://111.231.92.29:9008/api/file//contract/2022/04/15/004141b2-6987-4e79-90e7-78c8c03f2c82.pdf","state":0,"deptid":262,"readflag":null,"autographurl":null,"sealurl":null,"sealid":null},{"eid":58,"code":"4023","submitter":null,"submittime":null,"optuserid":1,"createtime":"2022-04-15T19:42:03.000+0000","fileurl":"http://111.231.92.29:9008/api/file//contract/2022/04/15/004141b2-6987-4e79-90e7-78c8c03f2c82.pdf","state":0,"deptid":262,"readflag":null,"autographurl":null,"sealurl":null,"sealid":null}
      ],
      limit:'8',
      offset:1,
      isEnd:false,
      searchVal:'',
      state:0
    }
  },
  onLoad(e){
    if(e.state)
    this.state = e.state
    this.getList(true)
  },
  onShareAppMessage(res) {
    if (res.from === 'button') {
      console.log('点击分享',res.target)
    }
    let eid = this.contractList.filter(e=>e.checked)[0].eid
    return {
      imageUrl: this.baseUrl + '20220511094747.png',
      title: '电子合同',
      path: '/pages/contractDetail/index?eid='+eid
    }
  },
  methods: {
    send(){
      uni.showToast({
        title: '请选择合同',
        icon: 'none'
      })
    },
    readContract:debounce(function(eid){
         uni.showLoading({
          title: '加载中...'
      })
      tEContractInfo({
        eid:eid
      }).then(e=>{
        uni.downloadFile({
          url: e.data.fileurl,
          success:(res)=> {
            var filePath = res.tempFilePath;
            this.pdfPath = filePath
            uni.openDocument({
              filePath: filePath,
              showMenu: true,
              success:(res) =>{
                uni.hideLoading()
                this.isRead = true
                console.log('打开文档成功');
              }
            });
          }
        });
      })
    },1000),
    checkItem(index,item){
      console.log(index,item)
      this.contractList.forEach(item=>{
        item.checked = false
        this.$set(this.contractList[index],'checked',true)
      })
      // if(this.contractList.filter(e=>e.checked = true).length>=1){
      //   uni.showToast({
      //     title: '只能选择一个合同',
      //     icon:'none'
      //   })
      // }else{

      // }
    },
    bindSrollToBottom(e){
      this.offset++
      this.getList()
    },
    bindSelect(){
      if(this.shareArr.length<=0){
        uni.showToast({
          title: '请选择合同',
          icon: 'none'
        })
        return false
      }
      console.log(this.shareArr)
       this.$store.commit('baseStore/SET_SELECTEDCONTRACTID',this.shareArr[0])
       uni.navigateBack({
         delta:1
       })
    },
    bindOpenPdf(item){
      // if(+this.state === 1){
      //  this.$store.commit('SET_SELECTEDCONTRACTID',item)
      //  uni.navigateBack({
      //     delta:1
      //   })
      // }else{
      //   uni.navigateTo({
      //     url: '/pages/contractDetail/send?eid='+item.eid
      //   })
      // }
      console.log(item)
      this.readContract(item.eid)
    },
    searchInput(){
      this.getList(true)
    },
    getList(isFresh=false){
      if(isFresh){
        this.offset = 1
        this.isEnd = false
        this.contractList = []
      }
      if(this.isEnd)return
      //只有业主
      console.log({'this.userInfo.usertype':this.userInfo.usertype})
      if(this.userInfo.usertype==2){
        getMyEContractlist({
          "limit": this.limit,
          "offset":this.offset,
          "userid":this.userInfo.userid,
          "code": this.searchVal,
        }).then(e=>{
           e.data.forEach(element => {
            element.checked = false
          });
          if(!e.data||e.data.length<this.limit){
            this.isEnd = true
          }
          if(e.data)
          this.contractList = [...this.contractList,...e.data]
        })
      }else{
        tEContractList({
          "code": this.searchVal,
          "enterpriseid":  this.userInfo.enterpriseid,
          "limit": this.limit,
          "offset":this.offset,
          "state": this.state
        }).then(e=>{
          console.log(e.data)
          e.data.forEach(element => {
            element.checked = false
          });
          if(!e.data||e.data.length<this.limit){
            this.isEnd = true
          }
          if(e.data)
          this.contractList = [...this.contractList,...e.data]
        })
      }
       
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.baseStore.userInfo
    
    },
    
    shareArr(){
      return this.contractList.filter(e=>e.checked)
    },
    
    baseUrl() {
      return process.env.VUE_APP_BASE_IMG_URL
    },
 
  }
}
</script>
<style lang="scss" scoped>
.checkbox{
  float:right;
}
.send-box{
  position: fixed;
  bottom: 0;
  width: 375px;
  height: 100rpx;
  background: #FCFCFC;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), inset 0px 1px 0px 0px #CCCCCC;
  backdrop-filter: blur(10px);
}
.send-btn{
  float: right;
  text-align: center;
  line-height: 100rpx;
  width: 100px;
  height: 100rpx;
  background: #FFAC5A;
  color:#fff;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.24);
}
.hunk {
  width: 100vw;
  box-sizing: border-box;
  // background: #f9f9f9;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  .search {
    height: 100rpx;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    img {
      width: 14px;
      height: 14px;
      position: absolute;
      top: 18px;
      left: 29px;
    }
    input {
      width: 345px;
      height: 30px;
      background: #f3f2f6;
      border-radius: 20px;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000;
      line-height: 30px;
      padding-left: 37px;
    }
    input::placeholder {
      color: #9b9b9b;
    }
  }
  .type-list {
    box-sizing: border-box;
    margin-top: 1px;
    background: #ffffff;
    width: 100%;
    padding: 10px 6px 0 15px;
    .newItem {
      display: flex;
      justify-content: space-between;
    }
    .type-item {
      width: 100%;
      .item-lable {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4a4a4a;
        margin: 0 0 10px 0;
      }
      .item {
        span {
          position: relative;
          display: inline-block;
          box-sizing: border-box;
          width: 80px;
          height: 26px;
          font-size: 14px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          line-height: 26px;
          text-align: center;
          margin: 0 8px 13px 0;
          img {
            width: 14px;
            height: 14px;
            position: absolute;
            top: 0;
            right: 0;
          }
        }
        span:nth-child(4) {
          margin-right: 0;
        }
      }
    }
    .newItem .type-item .item span:nth-child(2) {
      margin-right: 0;
    }
    .red {
      background: rgba(254, 65, 55, 0.2);
      border-radius: 4px;
      border: 1px solid #fe4137;
      color: #ef1e13;
    }
    .kong {
      background: rgba(18, 203, 110, 0.2);
      border-radius: 4px;
      border: 1px solid #00cf64;
      color: #00cf64;
    }
    .yizu {
      background: rgba(98, 136, 234, 0.2);
      border-radius: 4px;
      border: 1px solid #6288ea;
      color: #6288ea;
    }
    .jjjz {
      background: rgba(255, 218, 45, 0.2);
      border-radius: 4px;
      border: 1px solid #ffd62d;
      color: #ffe12d;
    }
    .zykjs {
      background: rgba(255, 199, 45, 0.2);
      border-radius: 4px;
      border: 1px solid #ffc72d;
      color: #ffc72d;
    }
    .wbdms {
      background: rgba(130, 130, 130, 0.2);
      border-radius: 4px;
      border: 1px solid #828282;
      color: #828282;
      font-weight: 400;
    }
    .zc {
      background: rgba(252, 145, 58, 0.2);
      border-radius: 4px;
      border: 1px solid #fc913a;
      color: #fc913a;
      font-weight: 400;
    }
  }
  .home-list {
    flex: 1;
    overflow-y: auto;
    .home-item {
      background-color: #fff;
      padding: 20px 15px;
      margin: 10px 0;
      .toppp {
        display: flex;
        justify-content: space-between;
        // align-items: center;
        .cccc {
          width: 70px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 400;
          color: #000000;
          line-height: 18px;
          padding-bottom: 8px;
        }
      }
    }
    .home-name {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 16px;
      padding-bottom: 10px;
    }
    .item-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .one {
        width: 108px;
        background: rgba(18, 203, 110, 0.2);
        border-radius: 4px;
        padding-bottom: 16px;
        margin: 10px 10px 0 0;
        position: relative;
        .cc {
          position: absolute;
          top: 0;
          right: 0;
        }
        .top {
          width: 60px;
          height: 18px;
          // background: #FC913A;
          // border-radius: 4px 0px 12px 0px;
          // font-size: 10px;
          // font-family: PingFangSC-Regular, PingFang SC;
          // font-weight: 400;
          // color: #FFFFFF;
          // line-height: 18px;
          // text-align: center;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .miaoshu {
          width: 89px;
          // height: 34px;
          font-size: 12px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #4a4a4a;
          line-height: 17px;
          margin: 2px 10px;
          word-break: break-all;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .yuezu {
          margin-left: 10px;
          color: #4a4a4a;
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 200;
          line-height: 17px;
          span {
            font-weight: 600;
            color: #ff5a65;
          }
        }
        .type1 {
          width: 36px;
          height: 24px;
        }
        .type2 {
          width: 39px;
          height: 31px;
        }
        .type3 {
          width: 44px;
          height: 35px;
        }
        .type {
          position: absolute;
          right: 4px;
          bottom: 4px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .wbdm {
        background: rgba(130, 130, 130, 0.2);
      }
      .zc {
        background: rgba(18, 203, 110, 0.2);
      }
      .tg {
        background: rgba(98, 136, 234, 0.2);
      }
      .one:nth-child(3n + 3) {
        margin-right: 0;
      }
    }
    .none {
      width: 100vw;
      height: 100%;
      // background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      img {
        width: 190px;
        height: 195px;
      }
    }
  }
  .flex{
      display:flex;
      flex-wrap: wrap
  }
  .pdfStyle{
    width:100rpx;
    height:100rpx;

  }
  .pstyle{
    text-align: center;
    font-size: 30rpx;
    color: #0191FF;
    line-height: 2;
    font-weight: 800;
  }
  .box{
    width:48%;height:260rpx;padding:10rpx 20rpx;background:#f9f9f9;margin-top:40rpx;border-radius:20rpx
  }
}
</style>